@font-face {
  src: url(fonts/billabong.ttf);
  font-family: billabong;
}
:root {
    --gradient: linear-gradient(90deg, #ffd954, #ee6352, purple);
  
  }

 .title {
    font-family: billabong;
    font-size: 100px;
    text-align: center;
  }

  .imgheart {
    width: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 10%;
  }
  
  body {
    font-family: billabong;
    text-align: center;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.500em;
    line-height: 1;
    color: #333;
    background: #ddd;
    background-size: 300%;
    background-image: var(--gradient);
    animation: bg-animation 10s infinite;
  }
  
  @keyframes bg-animation {
    0% {background-position: left}
    50% {background-position: right}
    100% {background-position: left}
  }
  



  .content {
    background: white;
    width: 70vw;
    padding: 3em;
    box-shadow: 0 0 3em rgba(0,0,0,.15);
  }





  .container-bouton{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    margin-left: auto;
    }
   .container-bouton .bouton{
    color: white;
    padding: 2em 4em;
    background: linear-gradient(90deg,#ffd954, #ee6352, purple);
    background-size: 300%;
    background-position: left;
    transition: background-position, 600ms;
    }
    
    .container-bouton .bouton:hover{
      background-position: right;
    }
   



.tip {
        font-family: arial;
        text-align: center;
        position: center;
        font-size: 20px;
        margin-right: 50px;
        margin-left: 50px;
    }
.conseils {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100px;
  text-align: center;
}
body {
  display: grid;
  min-height: 100vh;
  place-items: center;
}